<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>
       	 家庭成员
    </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="css/main.css" media="all">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script type="text/javascript" src="lib/loading/okLoading.js"></script>
</head>
<body>
<div class="x-nav">
            <span class="layui-breadcrumb">
              <a><cite>首页</cite></a>
              <a><cite>业主信息管理</cite></a>
              <a><cite>家庭成员信息管理</cite></a>
            </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"  href="javascript:location.replace(location.href);" title="刷新"><i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body">
    <form class="layui-form x-center" action="" style="width:800px" id="searchForm">
        <div class="layui-form-pane" style="margin-top: 15px;">
            <div class="layui-form-item">
                
                <div class="layui-input-inline">
                    <input type="text" name="familyName"  placeholder="姓名" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <input type="text" name="familyCard"  placeholder="身份证号码" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <input type="text" name="roomNo"  placeholder="门牌号" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-input-inline" style="width:80px">
                    <button class="layui-btn" type="button" onclick="family_search()" lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
                </div>
            </div>
        </div>
    </form>
    <xblock>
        <button class="layui-btn layui-btn-danger" onclick="delAll()">
            <i class="layui-icon">&#xe640;</i>批量删除
        </button>
        <button class="layui-btn" onclick="family_add('家庭成员添加','family-add.jsp','1000','600')">
            <i class="layui-icon" >&#xe608;</i>添加
        </button>
        
    </xblock>
    <table class="layui-table">
        <thead>
        <tr>
            <th><input type="checkbox" name="" value=""></th>
            <th>姓名</th>
            <th>身份证号码</th>
            <th> 图片</th>
            <th>门牌号</th>
            <th>与户主关系</th>
            <th>电话</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="content">
        <tr>
            <td><input type="checkbox" value="1" name=""></td>
            <td>张三 </td>
            <td>350322199901230512</td>
            <td ><img src="./images/tx.jpg" width="50" height="30"></td>
            <td >701</td>
            <td >户主本人</td>
            <td >110</td>
            
            <td class="td-manage">
                <a title="编辑" href="javascript:;" onclick="veh_edit('编辑','vehicle_add.html','1','1000','600')"
                   class="ml-5" style="text-decoration:none">
                    <i class="layui-icon">&#xe642;</i>
                </a>
                <a title="删除" href="javascript:;" onclick="veh_del(this,'1')"
                   style="text-decoration:none">
                    <i class="layui-icon">&#xe640;</i>
                </a>
            </td>
        </tr>
        </tbody>
    </table>
	<div class="layui-box layui-laypage layui-laypage-default" id="layui-laypage-2">
				    <a href="javascript:;" class="layui-laypage-prev layui-disabled" data-page="0"><i class="layui-icon"></i>
				    </a>
				    <span class="layui-laypage-curr"><em class="layui-laypage-em"></em><em>1</em></span>
				    <a href="javascript:;" data-page="2">2</a><a href="javascript:;" data-page="3">3</a>
				    <span class="layui-laypage-spr">…</span>
				    <a href="javascript:;" class="layui-laypage-last" title="尾页" data-page="100">100</a>
				    <a href="javascript:;" class="layui-laypage-next" data-page="2"><i class="layui-icon"></i></a>
				    <span class="layui-laypage-skip">到第<input type="text" min="1" value="1" class="layui-input">页<button type="button"
				            class="layui-laypage-btn">确定</button></span>
				    <span class="layui-laypage-count">共 1000 条</span>
				    <span class="layui-laypage-limits">
				        <select lay-ignore="">
				            <option value="2" selected="">2 条/页</option>
				            <option value="5">5 条/页</option>
				            <option value="10">10 条/页</option>
				            
				        </select>
				    </span>
				</div>
    <div id="page"></div>
</div>
<script src="js/jquery.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/back/js/jquery-form.js"></script>
<script>
let pageNum=1;
let pageSize=2;
family_search();

/*家庭成员查询*/
function family_search(){
	
	pageSize = $("#layui-laypage-2 select").val();
	if(pageSize==null){
		pageSize=2;
	}
	
	$.ajax({
		async:true,
		type:"get",
		url:"${pageContext.request.contextPath}/FamilyServlet",
		data:{
			op:"page",
			pageNum:pageNum,
			pageSize:pageSize,
			familyName:$("#searchForm input[name=familyName]").val(),
			familyCard:$("#searchForm input[name=familyCard]").val(),
			roomNo:$("#searchForm input[name=roomNo]").val()
		},
		contentType : "application/x-www-form-urlencoded",
		dataType : "json",
		success:function(result,status,xhr){
			let content="";
			if(result.data!=null){
				$.each(result.data.list,function(index,obj){
					content+=
						"<tr><td><input type=\"checkbox\" value=\"1\" name=\"\"></td>"+
		            "<td>"+obj.familyName+"</td>"+
		            "<td>"+obj.familyCard+"</td>"+ 
		            "<td ><img onclick=\"previewImg(this)\" width=\"50\" height=\"30\" src=\"${pageContext.request.contextPath}/FileDownloadServlet?type=image&fileName="+obj.familyImage+"\"></td>"+
		           "<td >"+obj.owner.roomNo+"</td>"+
		            "<td >"+obj.familyType.familyTypeName+"</td>"+
		            "<td >"+obj.familyPhone+"</td>"+
		            
		            "<td class=\"td-manage\">"+
		                "<a title=\"编辑\" href=\"javascript:;\" onclick=\"family_edit('家庭成员信息修改','family-edit.jsp','"+obj.familyCard+"','1000','600')\""+
		                "   class=\"ml-5\" style=\"text-decoration:none\">"+
		                 "   <i class=\"layui-icon\">&#xe642;</i>"+
		               " </a>"+
		               " <a title=\"删除\" href=\"javascript:;\" onclick=\"family_del('"+obj.familyCard+"')\""+
		               "    style=\"text-decoration:none\">"+
		               "     <i class=\"layui-icon\">&#xe640;</i></a></td></tr>";
				});
			}else{
				content+="暂无数据";
			}
			//将家庭成员信息内容渲染
			$("#content").html(content);
			//渲染分页栏目
			let pageContent = "";
			if (result.data != null) {
				//判断是不是第一页
				if (result.data.pageNum == 1) {
					pageContent = "<span href=\"javascript:;\" class=\"layui-laypage-prev layui-disabled\" data-page=\"0\"><i class=\"layui-icon\">上一页</i></span>";
				} else {
					pageContent = "<a href=\"javascript:;\" class=\"layui-laypage-prev\" data-page=\""
							+ (result.data.pageNum - 1)+ "\"><i class=\"layui-icon\">上一页</i></a>";
				}
				for (let i = 1; i <= result.data.pages; i++) {
					//判断当前页码
					if (i == result.data.pageNum) {
						pageContent += "<span class=\"layui-laypage-curr\" data-page=\""+i+"\"><em class=\"layui-laypage-em\"></em><em>"
								+ i + "</em></span>";
					} else {
						pageContent += "<a href=\"javascript:;\" data-page=\""+i+"\">"
								+ i + "</a>";
					}

				}
				//判断是否是最后一页
				if (result.data.pageNum == result.data.pages) {
					pageContent += "<span href=\"javascript:;\" class=\"layui-laypage-next layui-disabled\" data-page=\""
							+ (result.data.pageNum + 1)
							+ "\"><i class=\"layui-icon\">下一页</i></span>";
				} else {
					pageContent += "<a href=\"javascript:;\" class=\"layui-laypage-next\" data-page=\""
							+ (result.data.pageNum + 1)
							+ "\"><i class=\"layui-icon\">下一页</i></a>"
				}
				
				//拼接页码输入框
				pageContent += "<span class=\"layui-laypage-skip\" style=\"display:inline-block\">到第<input style=\"display:inline-block\" type=\"text\" min=\"1\" max=\""+(result.data.pages)+"\" value=\"1\" class=\"layui-input\">页<button type=\"button\""+
				         "   class=\"layui-laypage-btn\" style=\"display:inline-block\">确定</button></span>";
			    //拼接总条数
			    pageContent+="<span class=\"layui-laypage-count\">共"+result.data.total+"条</span>";
				
				//拼接下拉框
				pageContent += "<span class=\"layui-laypage-limits\">"
						+ "<select lay-ignore=\"\">"
						+ "<option value=\"2\" >2条/页</option>"
						+ "<option value=\"5\">5 条/页</option>"
						+ "<option value=\"10\">10 条/页</option>"
						+ "</select></span>";
				
				
				$("#layui-laypage-2").html(pageContent);

				$("#layui-laypage-2 select option").each(function() {
									if ($(this).val() == result.data.pageSize) {
										$(this).prop("selected","selected");
									}
								});
			} else {
				$("#layui-laypage-2").html(pageContent);
			}
		}
	
	})	
};

/* 上一页 下一页 页码*/
$("body").on("click", "#layui-laypage-2 a", function() {
	//获取超链接的自定义属性data-page上的页码，对pageNum充值赋值
	pageNum = $(this).data("page");
	//调用查询方法
	family_search();

});
/* 确定 页码*/
$("body").on("click", "#layui-laypage-2 button", function() {
	//获取输入框的页码
	let inputPageNum = $("#layui-laypage-2 input").val();
	//获取最大页数
	let maxPage = $("#layui-laypage-2 input").prop("max");
	if (inputPageNum >= 1 && inputPageNum <= maxPage) {
		//为pageNum设置
		pageNum = inputPageNum;
		//调用查询方法
		family_search();
	} else {
		//使用layui的layer弹出错误信息
		layui.use('layer', function() {
			layer.msg("输入页码只能在1-" + maxPage + "之间", {
				icon : 2,
				time : 3000
			});

		});
	}
});
/* 条数下拉框*/
$("body").on("change", "#layui-laypage-2 select", function() {
	//设置页码
	pageNum = 1;
	//调用查询方法
	family_search();
});

/*家庭成员删除方法*/
function family_del(familyCard){
	layer.confirm('确认要删除吗？', {
		icon : 3,
		title : '提示信息'
	}, function(index) {
		$.getJSON("${pageContext.request.contextPath}/FamilyServlet",{op:"delete",familyCard:familyCard},function(result,status,xhr){
			if(result.data==true){
				layui.use('layer',function(){
					layer.msg(result.message,{icon:1,time:3000});
				});
				//调用查询
				family_search();
			}else{
				layui.use('layer',function(){
					layer.msg(result.message,{icon:2,time:3000});
				});
			}
		});
		
		
	});
	
	
};


</script>

<script type="text/javascript">
//预览大小根据原图的大小决定弹窗的大小
function previewImg(obj) {
	
    var img = new Image();
    img.src = obj.src;
    var height = img.height + 50; //获取图片高度
    var width = img.width; //获取图片宽度
    var imgHtml = "<img src='" + obj.src + "' width='100%' height='100%'/>";
    //弹出层
    layer.open({
        type: 1,
        shade: 0.8,
        offset: 'auto',
        area: [height + 'px', width + 'px'],
        shadeClose: true,
        scrollbar: false,
        title: "图片预览", //不显示标题  
        content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响  
        cancel: function () {
            //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });  
        }
    });
}
</script>







<script src="lib/layui/layui.js" charset="utf-8"></script>
<script src="js/x-layui.js" charset="utf-8"></script>
<script>
    layui.use(['laydate','element','laypage','layer'], function(){
        $ = layui.jquery;//jquery
        laydate = layui.laydate;//日期插件
        lement = layui.element();//面包导航
        laypage = layui.laypage;//分页
        layer = layui.layer;//弹出层
        okLoading.close($);
        //以上模块根据需要引入

        //以上模块根据需要引入
        layer.ready(function(){ //为了layer.ext.js加载完毕再执行
            layer.photos({
                photos: '#x-img'
                //,shift: 5 //0-6的选择，指定弹出图片动画类型，默认随机
            });
        });


        var start = {
            min: laydate.now()
            ,max: '2099-06-16 23:59:59'
            ,istoday: false
            ,choose: function(datas){
                end.min = datas; //开始日选好后，重置结束日的最小日期
                end.start = datas //将结束日的初始值设定为开始日
            }
        };

        var end = {
            min: laydate.now()
            ,max: '2099-06-16 23:59:59'
            ,istoday: false
            ,choose: function(datas){
                start.max = datas; //结束日选好后，重置开始日的最大日期
            }
        };

        document.getElementById('LAY_demorange_s').onclick = function(){
            start.elem = this;
            laydate(start);
        }
        document.getElementById('LAY_demorange_e').onclick = function(){
            end.elem = this
            laydate(end);
        }
    });

    //批量删除提交
    function delAll () {
        layer.confirm('确认要删除吗？',function(index){
            //捉到所有被选中的，发异步进行删除
            layer.msg('删除成功', {icon: 1});
        });
    }

    function question_show (argument) {
        layer.msg('可以跳到前台具体问题页面',{icon:1,time:1000});
    }
    /*添加*/
    function family_add(title,url,w,h){
        x_admin_show(title,url,w,h);
    }
    //编辑
    function family_edit (title,url,familyCard,w,h) {
        url = url+"?familyCard="+familyCard;
        x_admin_show(title,url,w,h);
    }

    /*删除*/
    function veh_del(obj,id){
        layer.confirm('确认要删除吗？',{icon:3,title:'提示信息'},function(index){
            $.ajax({
                type:"post",
                url:"xxx",
                data:{id:id},
                dataType:"json",
                success:function(data){
                    //console.log(data);
                    if(data.status==1){
                        //发异步删除数据
                        $(obj).parents("tr").remove();
                        layer.msg(data.info,{icon:6,time:1000});
                        setTimeout(function(){
                            window.location.reload();
                        },1000);return false;
                    } else{
                        layer.msg(data.info,{icon:5,time:1000});return false;
                    }
                }
            });
            //发异步删除数据
            $(obj).parents("tr").remove();
            layer.msg('已删除!',{icon:1,time:1000});
        });
    }
</script>

</body>
</html>